<template>
	<view class="properties-box">
		<view class="filter">
			<view class="type-item">
				<picker mode="selector" :range="typeList" range-key="label" @change="handerChangeType">
					<text>设备类型</text>
					<uni-icons type="down" size="12"></uni-icons>
				</picker>
			</view>
		</view>
		<view class="air-list box">
			<uni-list>
				<view class="list-header">
					<view style="width: 20%;">序号</view>
					<view style="width: 50%;">数据日期</view>
					<view style="width: 50%;">平板在线状态</view>
					<view style="width: 30%;text-align: center;">控制板信</view>
				</view>
				<template v-if="tableData.length > 0">
					<uni-list-item style="height: 100rpx;" v-for="(item,index) in tableData" :key="index">
						<template v-slot:header>
							<view class="air-index" style="width: 20%;">
								{{index + 1}}
							</view>
						</template>
						<template v-slot:body>
							<view class="air-time" style="width: 50%;">
								{{item.newestTime}}
							</view>
						</template>
						<template v-slot:footer>
							<view class="air-tem" style="width: 30%;">
								{{item.newestData}}
							</view>
						</template>
					</uni-list-item>
				</template>
				<view class="no-data" v-else>
					暂无数据
				</view>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [],
				tableData:[]
			}
		},
		methods: {
			handerChangeType(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
.properties-box {
	height: 100vh;
	overflow: hidden;
	background: #F4F5F5;
	.filter {
		display: flex;
		align-items: center;
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		padding: 0 24rpx;
		.type-item {
			width: 172rpx;
			height: 50rpx;
			background: #F4F5F5;
			border-radius: 8rpx;
			display: flex;
			justify-content: center;
			margin-right: 28rpx;
		
			text {
				font-size: 24rpx;
				color: #535457;
				// line-height: 26rpx;
				margin-right: 4rpx;
			}
		}
	}
	.air-list {
		overflow-y: auto;
		width: 710rpx;
		height: 738rpx;
		margin-top: 18rpx;
		font-weight: 400;
		font-size: 30rpx;
		.list-header {
			line-height: 70rpx;
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #929496;
			padding:0 24rpx;
		}
		::v-deep .uni-list-item {
			height: 100rpx;
		}
		.air-index {
			color: #929496;
		}
		.air-time {
			
			color: #181D21;
		}
		.air-tem {
			text-align: center;
			font-weight: 600;
		}
	}
}
.no-data {
	height: 100%;
	width: 100%;
	display: flex;
	color: #A1A3A5;
	height: 668rpx;
	justify-content: center;
	align-items: center;
}

</style>
